<div class="d-table-fixed">
    <div class="d-cell wd-md code-files">
        <div class="d-table">
            <div class="d-row">
                <div class="d-cell-wrapper">
                    <div class="d-cell-inner">
                        <div class="p">
                            <tree-root #tree [nodes]="nodes" [focused]="true" [options]="customTemplateStringOptions" (onActivate)="onSelectFile($event)">
                                <ng-template #treeNodeTemplate let-node>
                                    <span title="{{node.data.subTitle}}">{{ node.data.name }}</span>
                                    <span class="pull-right">{{ childrenCount(node) }}</span>
                                </ng-template>
                                <ng-template #loadingTemplate>Loading, please hold....</ng-template>
                            </tree-root>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-sm">
                <select class="form-control" [(ngModel)]="editorOpts.theme" (ngModelChange)="loadTheme()" name="sel2">
                    <option *ngFor="let theme of editorThemes">{{theme}}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="d-cell">
        <div class="d-table">
            <div class="d-row">
                <div class="d-cell-wrapper">
                    <div class="d-cell-inner">
                        <div class="code-editor fh">
                            <div class="code-toolbar btn-toolbar" role="toolbar">
                                <div class="btn-group p pull-right">
                                    <button class="btn btn-default btn-sm" type="button" aria-label="New" (click)="addNode(tree)">New</button>
                                    <button class="btn btn-default btn-sm" type="button" aria-label="Open">Open</button>
                                </div>
                                <div class="btn-group p pull-left">
                                    <button class="btn btn-default btn-sm" type="button" aria-label="Save">Save</button>
                                </div>
                            </div>
                            <!-- codemirror editor -->
                            <textarea #editor></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
